<script setup lang="ts">
import { onMounted } from 'vue';
import dayjs from 'dayjs';
import { getCurrentInstance, navigateTo, redirectTo, reLaunch } from '@tarojs/taro';
import {
  WORK_ORDER_STATUS,
  WORK_ORDER_STATUS_COLOR,
  WORK_ORDER_STATUS_BG_COLOR,
} from '/@/common/constant';
import { QUERY_APP_WORK_ORDER_LIST } from '/@/api/modules/order/app-work-order';
import { state } from './state';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as {
  assetId: string;
};

/**
 * @description 列表查询
 * @param {Number} page -当前页
 * @param {Number} pageSize -每页条数
 */
function queryList(page: number = 1, pageSize: number = 15) {
  if (!page && state.finished) return;
  state.loading = true;

  QUERY_APP_WORK_ORDER_LIST({
    comQuery: { page, pageSize },
    workOrderDto: {
      status: 'task_process',
      assetId: params.assetId,
    },
  })
    .then((res) => {
      state.loading = false;

      if (
        state.activePage >=
        (res.comQuery?.pageCount ||
          (res.comQuery?.totalCount as number) / (res.comQuery?.pageSize as number) ||
          1)
      )
        state.finished = true;
      if (!res.workOrderDto || !res.workOrderDto.length) {
        state.tipVisible = true;
        return;
      }

      res.workOrderDto.forEach((item) => state.list.push(item));
      state.activePage += 1;

      if (state.list.length === 1) {
        redirectTo({
          url: `/pages/work-order/detail/index?id=${state.list[0].id}&assetId=${params.assetId}&from=scan`,
        });
      }
    })
    .catch(() => {
      state.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoading() {
  if (state.finished) return;

  queryList(state.activePage);
}

onMounted(() => {
  state.activePage = 1;
  state.loading = true;
  state.finished = false;
  state.list = [];
  onLoading();
});
</script>

<template>
  <view class="work-order-list app-page--1">
    <app-navbar title="维修工单" />
    <scroll-view
      class="app-page__wrapper"
      :scroll-y="true"
      :lower-threshold="100"
      @scrolltolower="onLoading()"
    >
      <view class="work-order-list__wrapper">
        <view
          v-for="item in state.list"
          :key="item.id || ''"
          class="work-order-item"
          @click="
            navigateTo({
              url: `/pages/work-order/detail/index?id=${item.id}&assetId=${params.assetId}&from=scan`,
            })
          "
        >
          <view class="work-order-item__header">
            <view class="work-order-item__header--left">
              <text class="work-order-item__code">{{ item.orderCode }}</text>
            </view>
            <view class="work-order-item__header--right">
              <text
                class="work-order-item__status"
                :style="{
                  color: item.status ? WORK_ORDER_STATUS_COLOR[item.status] : '#999',
                  backgroundColor: item.status ? WORK_ORDER_STATUS_BG_COLOR[item.status] : '#999',
                }"
              >
                {{ item.status ? WORK_ORDER_STATUS[item.status] : '-' }}
              </text>
            </view>
          </view>
          <view class="work-order-item__description">
            <view class="work-order-item__description--left">
              <text>{{ item.description }}</text>
            </view>
            <view class="work-order-item__description--right">
              <text
                v-if="item.hastenStatus === 2"
                class="work-order-item__status work-order-item__status--hasten"
                >加急</text
              >
            </view>
          </view>
          <view>
            <nut-row>
              <nut-col span="12">
                <text>来源:&nbsp;&nbsp;</text>
                <text>{{ item.orderSourceCode || '-' }}</text>
              </nut-col>
              <nut-col span="12">
                <text>创建人:&nbsp;&nbsp;</text>
                <text>{{ item.createUserName || '-' }}</text>
              </nut-col>
            </nut-row>
          </view>
          <view>
            <text>创建时间:&nbsp;&nbsp;</text>
            <text>
              {{
                item.releaseTime
                  ? dayjs(Number(item.releaseTime)).format('YYYY-MM-DD HH:mm:ss')
                  : '-'
              }}
            </text>
          </view>
        </view>
      </view>

      <view class="app-page__list-tips">
        <text v-if="!state.list.length">暂无数据！</text>
        <text v-else-if="state.list.length && state.loading">加载中...</text>
        <text v-else-if="state.list.length && state.finished">加载完成!</text>
      </view>
    </scroll-view>
    <nut-dialog
      no-cancel-btn
      title="温馨提示"
      content="您当前没有需处理的维修工单"
      v-model:visible="state.tipVisible"
      @ok="
        reLaunch({
          url: `/pages/scan/scan-success/index?assetId=${params.assetId}`,
        })
      "
    />
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
